<template>
    <div class="classification-chart" ref="pieChartBox" ></div>
</template>

<script setup lang="ts">
import {ref,onMounted,watch, PropType } from 'vue';
import * as echarts from 'echarts'
import { PieChartItem } from '@/types/config';
const props = defineProps({
    pieChartData:{
        required:true,
        type:Object as PropType<PieChartItem[]>
    },
    budgetType:{
        required:true,
        type:Number
    }
})

let pieChartBox = ref<HTMLElement>()
let pieChart = ref<echarts.ECharts | null>(null)

const pieChartOptions = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '各收入总览',
            type: 'pie',
            // radius: ['40%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: props.pieChartData
        }
    ]
}

watch(() => props.pieChartData, () => {
    pieChartOptions.series[0].data = props.pieChartData
    if (pieChart.value) {
        pieChart.value.setOption(pieChartOptions)
    }
}, { deep: true })

onMounted(()=>{    
    pieChart.value = echarts.init(pieChartBox.value)
    pieChartOptions.series[0].name = props.budgetType?'各支出占比':'各收入占比'
    pieChart.value.setOption(pieChartOptions)
})
</script>

<style scoped>
.classification-chart {
    width: 550px;
    height: 300px;
    margin-left: 20px;
}
</style>